<template>
  <div class="contarner-page" @click.stop="showLanguageHandel">
    <page-header ref="languageRef"></page-header>
    <main>
      <div class="container">
        <h1 class="c-000 italic fw700">404：Page Not Found</h1>
        <div class="posi">
          <div class="pagehome f-16 c-ccc">
            Check the web address and try again, or return to the Savinginsta
            <a href="/">home page.</a>
          </div>
          <img src="/static/images/404.webp" class="img" alt="" />
        </div>
      </div>
    </main>
    <footer>
      <div class="container">
        <div class="footer-content">
          <div class="footer-link">
            <div class="row flex_between">
              <div class="col-12">
                <div class="link-label fw700 c-000 f-21">Tools</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <a href="/instagram-story-download" target="_blank"
                      >Instagram Story Downloader</a
                    >
                  </li>
                  <li>
                    <a href="/instagram-reels-video-download" target="_blank"
                      >Instagram Reels Downloader</a
                    >
                  </li>
                  <li>
                    <a href="https://savingtik.com/" target="_blank"
                      >Tiktok Downloader</a
                    >
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">Support</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/contact"> Contact </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/blog"> Blog </nuxt-link>
                  </li>
                </ul>
              </div>
              <div class="col-6">
                <div class="link-label fw700 c-000 f-21">Legal</div>
                <ul class="list-unstyled c-ccc f-16">
                  <li>
                    <nuxt-link to="/terms-of-service">
                      Terms of Service
                    </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link to="/privacy-policy"> Privacy Policy </nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="copyright flex_ccenter">
            <b class="fw700 f-21 c-000"
              >We are not affiliated with Instagram or Meta</b
            >
            <div class="c-ccc f-16">
              <a
                download
                href="https://scontent-sin6-2.cdninstagram.com/v/t51.2885-19/219176852_153337420202693_8780965512770864268_n.jpg?stp=dst-jpg_s150x150&_nc_ht=scontent-sin6-2.cdninstagram.com&_nc_cat=105&_nc_ohc=9Dgm-sf5IuMAX9jgtkE&edm=AP_V10EBAAAA&ccb=7-5&oh=00_AfA4yL6uMQTl36FkX1usvj1lcAGcifa7cmLZDkM-qpFDnA&oe=656CB15F&_nc_sid=2999b8"
              >
                © {{new Date().getFullYear()}} Insta Downloader All rights reserved.</a
              >
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
        
        <script>
import { mapState, mapGetters, mapMutations } from "vuex";
import pageHeader from "~/components/page-header.vue";
export default {
  components: { pageHeader },
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["language"]),
  },
  mounted() {},
  methods: {
    showLanguageHandel() {
      this.$refs.languageRef.close();
    },
  },
};
</script>
<style lang="scss" scoped>
input::-webkit-calendar-picker-indicator {
  display: none !important;
}
main {
  h1 {
    margin-top: 30px;
    font-size: 68px;
    text-align: center;
  }
  .posi {
    position: relative;
    .pagehome {
      position: absolute;
      left: 50%;
      top: 30px;
      text-align: center;
      transform: translateX(-50%);
      width: 100%;
      a {
        margin-left: 8px;
        text-decoration: underline;
        color: #433aff;
      }
    }
  }
  .img {
    width: 100%;
    height: auto;
  }
}
footer {
  background-color: #f7f6f9;
  .footer-content {
    padding: 50px 0 30px;
    .row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;

      .col-12 {
        flex: 0 0 auto;
        width: 33.33333333%;
      }
      .col-6 {
        flex: 0 0 auto;
        width: 33.33333333%;
      }
      .list-unstyled {
        margin-top: 20px;
        list-style: none;
        li {
          margin-bottom: 20px;
        }
      }
    }
    .copyright {
      margin-top: 40px;
      div {
        margin-top: 8px;
      }
    }
  }
}
// 宽度小于768
@media (max-width: 768px) {
  main {
    h1 {
      margin-top: 30px;
      font-size: 28px;
      text-align: center;
    }
    .posi {
      position: relative;
      .pagehome {
        position: absolute;
        left: 50%;
        top: 30px;
        transform: translateX(-50%);
        width: 100%;
        a {
          margin-left: 8px;
          text-decoration: underline;
          color: #433aff;
        }
      }
    }
    .img {
      width: 100%;
      height: auto;
    }
  }

  .container {
    padding: 0 14px;
  }

  footer {
    background-color: #f7f6f9;
    .footer-content {
      padding: 50px 0 30px;
      .row {
        display: flex;
        flex-wrap: wrap;
        .col-12 {
          flex: 0 0 auto;
          width: 100%;
        }
        .col-6 {
          flex: 0 0 auto;
          width: 50%;
        }
        .list-unstyled {
          margin-top: 20px;
          list-style: none;
          li {
            margin-bottom: 20px;
          }
        }
      }
      .copyright {
        margin-top: 40px;
        b {
          font-size: 14px !important;
        }
        div {
          margin-top: 8px;
          font-size: 14px !important;
        }
      }
    }
  }
}
</style>
        